import React from "react";
import Divider from "antd/lib/divider";
import Timeline from "antd/lib/timeline";
import Layout from "antd/lib/layout";
import Workflow from "@/services/workflow";
const {Sider,Content } = Layout;
export default class Lookcheck extends React.Component {
  state = {
    loading: true,
    comments:"",
    data:[],
  };
  componentWillMount() {
    let param={
      bill:this.props.bill,
      billid:this.props.billid,
      bill_type:this.props.bill_type,
      orgunitid:this.props.orgunitid,
    }
   Workflow.getmessage(param).then(data => {
       if(data.length>0) {
         this.setState({
           data: data,
           comments: data[0].comments,
           loading: false,
         });
       }else{
          this.setState({
            loading: false,
          });
       }
      }).catch(error => {
          this.setState({
            loading: false,
          });
        });
  }
  handlesel = (record) => {
    this.setState({
      comments: record.comments,
    });
  };
  lineadd(){
    return (
      <Timeline>
      {(this.state.data || []).map(item => (
        <Timeline.Item color={item.colors}>
         <a onClick={() => this.handlesel(item)}>{item.updated_at + "  " + item.message}</a> 
        </Timeline.Item>
      ))}
     </Timeline>
    );
  };
    render() {
      if (this.state.loading) return null;
      return (
            <div>
              <Divider type="horizontal" />  
      <Layout>
       <Sider width={400} style={{ background: '#fff' }}>
          {this.lineadd()}
       </Sider>
          <Content>
          <div dangerouslySetInnerHTML={{__html: this.state.comments}}></div>
        </Content>
      </Layout>
        </div>
      );
    }
}
